<template>
  <div class="wrapper">
    <el-table :data="appList.data" :stripe="true" :border="true" :highlight-current-row="true">
      <el-table-column type="expand">
        <ul slot-scope="prop">
          <li>
            <label>APP_KEY:</label><span v-text="prop.row.app_key"></span>
          </li>
          <li>
            <label>允许角色ID:</label><span v-text="prop.row.allow_role_ids"></span>
          </li>
        </ul>
      </el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="名称" prop="name"></el-table-column>
      <el-table-column label="创建时间" prop="create_time"></el-table-column>
      <el-table-column label="修改时间" prop="update_time"></el-table-column>
      <el-table-column label="状态" prop="status_text"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 1" size="mini" @click="appStop(scope.row)">禁用</el-button>
          <el-button v-else size="mini" @click="appStart(scope.row)">启用</el-button>
          <router-link :to="'/system/appedit/' + scope.row.id">
            <el-button size="mini" @click="appEdit(scope.row)">编辑</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="total, prev, pager, next"
        :page-size="pageData.per_page"
        :total="pageData.total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { isEmpty } from 'lodash'

export default {
  created () {
    this.getList()
  },
  computed: {
    ...mapState({
      appList: state => state.app.list
    })
  },
  watch: {
    appList (list) {
      // console.log('list:', list)
      if (!isEmpty(list)) {
        this.pageData.total = Number(list.total)
        this.pageData.current_page = Number(list.current_page)
        this.pageData.last_page = Number(list.last_page)
      }
    }
  },
  data () {
    return {
      pageData: {
        total: 1,
        per_page: 10,
        current_page: 1,
        last_page: 1
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  },
  methods: {
    async getList () {
      let payload = {page: this.pageData.current_page, list_rows: this.pageData.per_page}
      await this.$store.dispatch('app/getList', payload)
    },
    // 启用应用
    async appStart (row) {
      await this.$store.dispatch('app/start', {id: row.id})
      this.getList()
      // console.log('aaa:', index, row)
    },
    // 禁用应用
    async appStop (row) {
      await this.$store.dispatch('app/stop', {id: row.id})
      this.getList()
      // console.log('stop:', index, row)
    },
    // 编辑应用
    async appEdit (row) {
    },
    // 点击翻页时操作
    handleCurrentChange (val) {
      this.pageData.current_page = val
      this.getList()
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../../assets/scss/base.scss";
.wrapper{
  .el-table{
    table{
      tr{
        td{
          ul{
            li{
              label{
                display: inline-block;
                vertical-align: top;
                width: $label-w;
                height: $label-h;
                line-height: $label-h;
                text-align: right;
                padding-right: 10px;
              }
              span{
                display: inline-block;
                vertical-align: top;
                width: $label-w * 2;
                height: $label-h;
                line-height: $label-h;
              }
            }
          }
        }
      }
    }
  }
}
</style>

